<template>
<div class="sub-categry">
  <van-divider
  :style="{
          color: '#1989fa',
          borderColor: '#fdde4a',
          padding: '0 16px' }"
  >潮流精选</van-divider>
  <van-grid
  :gutter="10"
  :border="false">
      <van-grid-item
      v-for="item in categories"
      :key="item.id"
      :icon="item.imageUrl"
      :text="item.title" />
  </van-grid>
  <van-divider
  :style="{
          color: '#1989fa',
          borderColor: '#fdde4a',
          padding: '0 16px' }"
  >大家都在逛</van-divider>
</div>
</template>

<script>
import { getSubCategories } from '@/api/list'
export default {
  name: 'subCategory',
  data () {
    return {
      categories: []
    }
  },
  watch: {
    $route: { // 见监视激活路由的变化，当路由改变，则查询子分类数据
      handler (v) {
        // 获取父级分类的id
        const cid = v.params.cid
        // 查询子分类数据
        getSubCategories(cid)
          .then(res => {
            this.categories = res.categories
          })
      },
      immediate: true
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
